<template>
  <div>
    <!-- <el-form ref="assetForm" :model="formItem" :rules="rules" label-width="120px" size="mini"> -->
    <el-form :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="编码">
            {{ formItem.code }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            {{ formItem.changeStatus }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            {{ formItem.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="更新时间">
            {{ formItem.updateTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商">
            {{ formItem.manufacturerName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商联系人">
            {{ formItem.manufacturerPerson }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商联系电话">
            {{ formItem.manufacturerPhone }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维保开始时间">
            {{ formItem.maintenanceStart }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维保结束时间">
            {{ formItem.maintenanceEnd }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维保负责人">
            {{ formItem.maintenanceUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维保说明">
            {{ formItem.maintenanceNote }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <PageableTable
      :loading="false"
      :data="formItem.assets"
      :table-height="500"
      :disable-pageable="true"
      :multiple-selected="false"
      class="fixed-table-table"
    >
      <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
        <template slot-scope="scope">
          <column-render :render="column.render" :row="scope.row" :column="column" />
        </template>
      </el-table-column>
    </PageableTable>
  </div>
</template>

<script>
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import { detail } from '@neu/dcam-ui/api/maintenanceChange'
import { formatDate } from '@neu/biz-core/utils/utils'
import PageableTable from '@neu/biz-core/components/PageableTable'
// 定义一个表单原始项
const formItem = {
  code: '',
  changeStatus: '',
  maintenanceChangeDate: '',
  manufacturerId: '',
  manufacturerName: '',
  manufacturerPerson: '',
  manufacturerPhone: '',
  maintenanceId: '',
  maintenanceStart: null,
  maintenanceEnd: null,
  maintenanceUserId: '',
  maintenanceUserName: '',
  maintenanceNote: '',
  assets: []
}
export default {
  name: 'PermissionsEditForm',
  components: {
    PageableTable
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },

  data() {
    return {
      /** 资产来源 */
      assetSource: [],
      /** 资产状态 */
      assetStatus: [],
      status: [{ value: 'created', label: '已创建' }, { value: 'confirmed', label: '已确认' }, { value: 'finish', label: '已完成' }],
      /** 要移除的资产 */
      removeData: [],
      /** 是否显示资产 */
      assetSelDialogFormVisible: false,
      /** 是否显示维保负责人的数据 */
      mainteanceSelDialogFormVisible: false,
      /** 供应商信息对话框是否显示 */
      manucacturerSelect: false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      formItem: { ...formItem },
      insideColumns: [
        { title: '资产分类', width: 100, key: 'TypeName', display: true, fixed: true, render: (h, params) => {
          return h('span', params.row.assetTypeName)
        } },
        { title: '资产编号', width: 220, key: 'code', display: true, fixed: true
        },
        { title: '资产名称', width: 150, key: 'name', display: true, fixed: true },
        { title: '状态', width: 100, key: 'statusCode', display: true, fixed: true, render: (h, params) => {
          const status = this.assetStatus.filter(t => {
            return t.code === params.row.statusCode
          })
          const statusDesc = status.length === 1 ? status[0].text : params.row.statusCode
          return h('span', [
            h('el-tag', statusDesc)
          ])
        } },
        { title: '规格型号', width: 150, key: 'productName', display: true },
        { title: '放置位置', width: 100, key: 'locationName', display: true },
        { title: '使用部门', width: 100, key: 'orgName', display: true },
        { title: '使用人', width: 90, key: 'userName', display: true },
        { title: '计量单位', width: 80, key: 'measureUnit', display: true },
        { title: '单价', width: 70, key: 'money', display: true },
        { title: '使用期限（月）', width: 120, key: 'month', display: true },
        { title: '来源', width: 80, key: 'sourceCode', display: true, render: (h, params) => {
          const source = this.assetSource.filter(t => {
            return t.code === params.row.sourceCode
          })
          const sourceDesc = source.length === 1 ? source[0].text : params.row.sourceCode
          return h('span', [
            h('el-tag', sourceDesc)
          ])
        } },
        { title: '合同编号', width: 100, key: 'contractCode', display: true },
        { title: '合同名称', width: 100, key: 'contractName', display: true },
        { title: '供应商', width: 90, key: 'manufacturerName', display: true },
        { title: '供应商联系人', width: 130, key: 'manufacturerPerson', display: true },
        { title: '供应商联系方式', width: 140, key: 'manufacturerPhone', display: true },
        { title: '维保开始时间', width: 150, key: 'maintenanceStart', render: (h, params) => { return h('span', formatDate(params.row.maintenanceStart)) }, display: true },
        { title: '维保结束时间', width: 150, key: 'maintenanceEnd', render: (h, params) => { return h('span', formatDate(params.row.maintenanceEnd)) }, display: true },
        { title: '维保负责人', width: 120, key: 'maintenanceUserName', display: true },
        { title: '维保说明', width: 'auto', key: 'maintenanceNote', display: true },
        { title: '创建时间', width: 150, key: 'createTime', render: (h, params) => { return h('span', formatDate(params.row.createTime)) }, display: true },
        { title: '更新时间', width: 150, key: 'updateTime', render: (h, params) => { return h('span', formatDate(params.row.updateTime)) }, display: true }

      ]
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },
  created() {
    findByDictionaryType('assetSource').then(res => {
      if (res.status === 'success') {
        this.assetSource = res.data
      }
    })
    findByDictionaryType('assetStatus').then(res => {
      if (res.status === 'success') {
        this.assetStatus = res.data
      }
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = { ... response.data }
          if (this.formItem.contract === null) {
            this.formItem.contract = {}
          }
          this.formItem.changeStatus = this.formItem.changeStatus === 'created' ? '已创建' : this.formItem.changeStatus === 'confirmed' ? '已确认' : '已完成'
          this.formItem.maintenanceStart = formatDate(this.formItem.maintenanceStart)
          this.formItem.maintenanceEnd = formatDate(this.formItem.maintenanceEnd)
          this.formItem.createTime = formatDate(this.formItem.createTime)
          this.formItem.updateTime = formatDate(this.formItem.updateTime)
        })
      } else {
        this.formItem = { ...formItem }
      }
    },
    reset() {
      this.$refs.assetForm.resetFields()
      formItem.assets = []
      this.formItem = { ...formItem }
    }
  }
}
</script>
